<template>
  <div class="app-container">
    <a-row>
      <a-col :span="8" class="card-box">
        <a-card hoverable>
          <template #title>
            <span style="vertical-align: middle;">CPU</span>
          </template>
          <div>
            <a-descriptions style="margin-top: 20px" :data="cpuInfo" size="large" :column="1" />
          </div>
        </a-card>
      </a-col>

      <a-col :span="8" class="card-box">
        <a-card hoverable>
          <template #title>
            <span style="vertical-align: middle;">系统内存</span>
          </template>
          <a-descriptions style="margin-top: 20px" :data="sysMemInfo" size="large" :column="1" />
        </a-card>
      </a-col>

      <a-col :span="8" class="card-box">
        <a-card hoverable>
          <template #title>
            <span style="vertical-align: middle;">JVM内存</span>
          </template>
          <a-descriptions style="margin-top: 20px" :data="jvmMemInfo" size="large" :column="1" />
        </a-card>
      </a-col>

      <a-col :span="8" class="card-box">
        <a-card hoverable>
          <template #title>
            <span style="vertical-align: middle;">服务器信息</span>
          </template>
          <a-descriptions style="margin-top: 20px" :data="serverInfo" size="large" :column="1" />
        </a-card>
      </a-col>

      <a-col :span="8" class="card-box">
        <a-card hoverable>
          <template #title>
            <span style="vertical-align: middle;">Java虚拟机信息</span>
          </template>
          <a-descriptions style="margin-top: 20px" :data="jvmInfo" size="large" :column="1" />
        </a-card>
      </a-col>

      <a-col :span="8" class="card-box">
        <a-card hoverable>
          <template #title>
            <span style="vertical-align: middle;">磁盘状态</span>
          </template>
          <div class="a-table a-table--enable-row-hover a-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="a-table__cell a-table__cell is-leaf">
                    <div class="cell">盘符路径</div>
                  </th>
                  <th>
                    <div class="cell">文件系统</div>
                  </th>
                  <th>
                    <div class="cell">盘符类型</div>
                  </th>
                  <th>
                    <div class="cell">总大小</div>
                  </th>
                  <th>
                    <div class="cell">可用大小</div>
                  </th>
                  <th>
                    <div class="cell">已用大小</div>
                  </th>
                  <th>
                    <div class="cell">已用百分比</div>
                  </th>
                </tr>
              </thead>
              <tbody v-if="server.sysFiles">
                <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                  <td>
                    <div class="cell">{{ sysFile.dirName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.sysTypeName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.typeName }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.total }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.free }}</div>
                  </td>
                  <td>
                    <div class="cell">{{ sysFile.used }}</div>
                  </td>
                  <td>
                    <div class="cell" :class="{ 'text-danger': sysFile.usage > 80 }">{{ sysFile.usage }}%</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { getServer } from '@/api/monitor/server';

const server = ref([]);
const cpuInfo = ref([
  { label: '核心数', value: 0 },
  { label: '用户使用率', value: 0 },
  { label: '系统使用率', value: 0 },
  { label: '当前空闲率', value: 0 },
])
const sysMemInfo = ref([
  { label: '总内存', value: 0 },
  { label: '已用内存', value: 0 },
  { label: '剩余内存', value: 0 },
  { label: '使用率', value: 0 },
])
const jvmMemInfo = ref([
  { label: '总内存', value: 0 },
  { label: '已用内存', value: 0 },
  { label: '剩余内存', value: 0 },
  { label: '使用率', value: 0 },
])
const serverInfo = ref([
  { label: '服务器名称', value: 0 },
  { label: '操作系统', value: 0 },
  { label: '服务器IP', value: 0 },
  { label: '系统架构', value: 0 },
])
const jvmInfo = ref([
  { label: 'Java名称', value: 0 },
  { label: 'Java版本', value: 0 },
  { label: '启动时间', value: 0 },
  { label: '运行时长', value: 0 },
])
const { proxy } = getCurrentInstance();

function getList() {
  getServer().then(({ data }) => {
    server.value = data;
    cpuInfo.value = [
      { label: '核心数', value: data.cpu.cpuNum },
      { label: '用户使用率', value: data.cpu.used + "%" },
      { label: '系统使用率', value: data.cpu.sys + "%" },
      { label: '当前空闲率', value: data.cpu.free + "%" },
    ]
    sysMemInfo.value = [
      { label: '总内存', value: data.mem.total + "G" },
      { label: '已用内存', value: data.mem.used + "G" },
      { label: '剩余内存', value: data.mem.free + "G" },
      { label: '使用率', value: data.mem.usage + "%" },
    ]
    jvmMemInfo.value = [
      { label: '总内存', value: data.jvm.total + "M" },
      { label: '已用内存', value: data.jvm.used + "M" },
      { label: '剩余内存', value: data.jvm.free + "M" },
      { label: '使用率', value: data.jvm.usage + "%" },
    ]
    serverInfo.value = [
      { label: '服务器名称', value: data.sys.computerName },
      { label: '操作系统', value: data.sys.osName },
      { label: '服务器IP', value: data.sys.computerIp },
      { label: '系统架构', value: data.sys.osArch },
    ]
    jvmInfo.value = [
      { label: 'Java名称', value: data.jvm.name },
      { label: 'Java版本', value: data.jvm.version },
      { label: '启动时间', value: data.jvm.startTime },
      { label: '运行时长', value: data.jvm.runTime },
    ]
  });
}

getList();
</script>
